<template>
  <div>
    <div  >
      <el-row :gutter="20" v-loading="loading" style="margin-left: -10px; margin-right: -10px;">
        <el-col :span="3" v-for="item in tableData.data" :key="item.id">
          <el-card :body-style="{ padding: '0px' }">
            <div class="card">
              <el-image style="width: 100%; height: auto;" :src="item.path">
              </el-image>
              <div style="padding:3px 14px;">
                会员卡:<span v-text="item.vipCardFeeName"></span>
              </div>
              <div style="padding:3px 14px;">
                是否激活:<span v-text="item.cardStateName"></span>
              </div>

            </div>

          </el-card>
        </el-col>
      </el-row>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[16, 32, 80, 160]"
                       :page-size="tableData.size" :pager-count="5"
                       layout="total, sizes, prev, pager, next, jumper" :page-count="tableData.totalPage"
                       :total="tableData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import common from "@/mixins/common.js";
import {Delete, Edit} from "@element-plus/icons-vue";

export default {
  name: "ad_index",
  mixins: [common],
  data() {
    return {
      Edit: Edit,
      deleteIcon: Delete,
      searchObject: {
        no: 1,
        size: 16,
        title: ''
      },
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading: false,
      tableData: {
        size: 0,
        total: 0,
        totalPage: 0,
        data: []
      },
      adPositionOptions: [],
    }
  },
 async mounted() {
    let id = this.$route.query.id;
    this.searchObject.codeTemplate=id;
    await this.getSearchList();

  },
  methods: {
    async getSearchList() {
      this.loading = true;
      let data = this.searchObject;
      let res = await this.$http.form("/vipCardCode/search", data);
      if (res.code === 200) {
        if (res.data){
          res.data.map(item=>{
            item.path="https://api.nbsaas.com/mallAdmin/qr?id="+item.id;
          });
        }

        this.tableData = res;
      }
      this.loading = false;
      this.$tool.data.set("ad_search", this.searchObject);

    },
    addView() {
      this.$router.push({
        path: 'add'
      });
    },
    showView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'view',
        query: data
      });
    },
    editView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'update',
        query: data
      });
    },
    deleteData(row) {
      this.selectId = row.id;
      this.dialogVisible = true;
    },
    clearSearch() {
      this.searchObject.key = "";
      this.searchObject.name = "";
      this.searchObject.title = "";
    },
    async handleClose() {

      this.dialogVisible = false;
      if (this.selectId) {
        let params = {};
        params.id = this.selectId;
        let res = await this.$http.form("/ad/delete", params);
        if (res.code === 200) {
          this.$message({
            message: '删除数据成功',
            type: 'success'
          });
          await this.getSearchList();
        } else {
          this.$message.error(res.msg);
        }
      }

    }

  },
}

</script>

<style scoped>
.el-card {
  margin: 10px 0px;
}

.card {
  position: relative;
}

.card:hover .state {
  display: flex;

}

.card .state {
  display: none;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0px;
  top: 0px;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 10px;
}
</style>
